<template>
	<scroll-view class="page" :scroll-x="false" :scroll-y="true" :scroll-with-animation="true"	:refresher-enabled="true" :refresher-triggered="refreshing" refresher-background="transparent" @refresherpulling="getAllRoles">
		<view class="wrap">
			<block v-for="(group, index) in allRoles" :key="index">
				<view class="group" v-if="group.roles && group.roles.length > 0">
					<view class="type-title"><text>{{ group.title }}</text></view>
					<view class="role-list">
						<view class="role-item"
							v-for="(item, index) in group.roles"
							:key="index"
							@tap="toCosplayChat"
							:data-id="item.id"
						>
							<view class="thumb">
								<image :src="item.thumb || '/static/images/cosplay/default.png'"></image>
							</view>
							<view style="width: 200rpx; overflow: hidden;">
								<view class="title" :style="item.title.length >= 6 ? 'font-size: 28rpx; line-height: 32rpx;' : ''">{{ item.title }}</view>
								<view class="ops">
									<view class="op-item" style="padding-right: 20rpx;">
										<image class="icon" src="/static/images/cosplay/ic_views.png"></image>
										{{ item.views }}
									</view>
									<view class="op-item">
										<image class="icon" src="/static/images/cosplay/ic_usages.png"></image>
										{{ item.usages }}
									</view>
								</view>
							</view>
						</view>
						<view style="clear: both"></view>
					</view>
				</view>
			</block>
		</view>
		
		<view class="empty" v-if="!allRoles || allRoles.length == 0">
			<image src="/static/images/nodata.png"></image>
		</view>
		
		<view class="nomore" v-else>{{ '没有更多了~' | lang }}</view>
	</scroll-view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {
            allRoles: [],
			refreshing: false
        };
    },
    onLoad(options) {
		this.getAllRoles();
		app.globalData.util.getSetting().then(setting => {})
    },
    onShow() {
		uni.setNavigationBarTitle({
			title: this.$lang('角色模拟')
		})
    },
    methods: {
        getAllRoles() {
			this.refreshing = true
			setTimeout(() => {
				this.refreshing = false
			}, 1000)
            app.globalData.util
                .request({
                    url: '/cosplay/getAllRoles'
                })
                .then((res) => {
                    this.setData({
                        allRoles: res.data
                    });
                });
        },

        toCosplayChat(e) {
            const id = e.currentTarget.dataset.id;
            uni.navigateTo({
                url: '/pages/cosplay/chat?role_id=' + id
            });
        }
    }
};
</script>
<style>
.page {
    position: absolute;
    width: 710rpx;
    left: 20rpx;
    right: 20rpx;
    top: 0;
    bottom: 0;
    overflow: hidden;
}

.wrap {
	border-radius: 20rpx;
	background: rgba(255, 255, 255, 0.8);
	margin-top: 20rpx;
}

.group {
	padding: 0 0 10rpx 0;
    overflow: hidden;
}

.type-title {
    height: 80rpx;
    line-height: 108rpx;
    padding: 0;
    position: relative;
    box-sizing: border-box;
	padding-left: 26rpx;
}
.type-title text {
	color: #1b1c1c;
	font-size: 30rpx;
	font-weight: bold;
}

.role-list {
    width: 100%;
    padding: 30rpx 0 0 24rpx;
    box-sizing: border-box;
}

.role-item {
    background: #f0f6f6;
    padding: 0 16rpx;
    border-radius: 20rpx;
    margin: 0 20rpx 20rpx 0;
    float: left;
    width: 320rpx;
	height: 130rpx;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    /* background: #f0f6f6;
    padding: 0 20rpx 0 0;
    border-radius: 20rpx;
    margin: 0 22rpx 24rpx 0;
    float: left;
    width: 340rpx;
    height: 130rpx;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-left: 150rpx;
    position: relative;
    overflow: hidden; */
}

.role-item:active {
    opacity: 0.8;
}
.role-item .thumb {
	width: 98rpx;
	height: 98rpx;
	min-width: 98rpx;
	margin-right: 16rpx;
	border-radius: 10rpx;
    overflow: hidden;
    /* width: 130rpx;
    height: 130rpx;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0; */
}
.role-item .thumb image {
	width: 100%;
	height: 100%;
}

.role-item .title {
    font-size: 32rpx;
    font-weight: 600;
    max-height: 60rpx;
    line-height: 40rpx;
    color: #1b1c1c;
    overflow: hidden;
    word-break: break-all;
}

.role-item .ops {
    display: flex;
    align-items: center;
    margin-top: 18rpx;
    height: 24rpx;
}
.role-item .ops .op-item {
    display: flex;
    align-items: center;
    color: #a9afaf;
    font-size: 20rpx;
}
.role-item .ops .op-item .icon {
    width: 24rpx;
    height: 24rpx;
    margin-right: 4rpx;
}

.empty {
    text-align: center;
    margin: 0 60rpx;
    padding: 80rpx 0 100rpx 0;
    margin-top: 120rpx;
    border-radius: 20rpx;
}
.empty image {
    width: 240rpx;
    height: 240rpx;
}

.nomore {
	height: 48rpx;
	text-align: center;
	color: #aaa;
	padding: 20rpx 0 40rpx 0;
	font-size: 28rpx;
}


</style>
